<script setup lang="ts">
import { QCardSection, QBtn, QTooltip, QSpace } from "quasar";
import { toRaw } from "vue";

import { ExtIdTuple, ExtIntro, ExtOwner } from "qqlx-core";
import { } from "qqlx-cdk";

import ComAvatar from "../ComAvatar/index.vue";

type ComGroup = ExtIdTuple & ExtOwner & ExtIntro;
const vueProps = defineProps<{
  group: ComGroup;
  readonly?: boolean;
  readMessage?: string;
}>();

const emit = defineEmits<{
  (event: "edit", group: ComGroup): void;
}>();
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
</script>

<template>
  <div class="relative rounded overflow-hidden hover-box flex flex-col flex-nowrap">
    <q-card-section class="relative h-16 bg-secondary opacity-20 overflow-hidden">
      <slot name="icon"></slot>
    </q-card-section>

    <ComAvatar :user="vueProps.group.justOwner" :size="42" labelPre="管理员："
      class="absolute z-10 top-16 left-6 -translate-y-1/2">
      <slot name="badge"></slot>
    </ComAvatar>

    <q-btn v-if="!vueProps.readonly" round icon="more_horiz"
      class="absolute z-10 top-16 right-6 -translate-y-1/2 hover-target bg-white"
      @click.stop="emit('edit', toRaw(vueProps.group))">
      <q-tooltip class="text-lg">{{ vueProps.readMessage || "修改这个数据包" }}</q-tooltip>
    </q-btn>

    <q-card-section class="px-6 pt-9">
      <div class="font-semibold" :class="{ 'line-through': vueProps.group.isDisabled }">
        <span class="relative">{{ vueProps.group.name }}</span>
      </div>
      <div class="text-caption pt-3">{{ vueProps.group.desc }}</div>
    </q-card-section>

    <q-space></q-space>
    <slot></slot>
  </div>
</template>
